var canvas;
var ctx; 

$(function(){
	if (!document.createElement('canvas').getContext)
	{
		alert("Sorry, you browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, etc. Do not use IE.");
		return;
	} 
	//align center
	var left = (document.body.screenWidth - document.getElementById("canvas").width) >> 1;
	var top = (document.body.clientHeight - document.getElementById("canvas").height) >> 1;
	document.body.style.marginLeft = left;
	document.body.style.marginTop = top;
	
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d'); 
	//start game
	loadResources();
});

var resources = {
	backgroundImg:{path:"images/fight/bg1.jpg"},
	hubao:{path:"images/fight/hubao.png"}
}

var loadResources = function() {
	var loader = new PxLoader();
	for (var ele in resources) {
		resources[ele].image =loader.addImage(resources[ele].path);
	}
	loader.addCompletionListener(function(){
		startup();
	}); 
	 
	// begin downloading images 
	loader.start(); 
}

var hubaoCanvas;
var hubaoCtx;

var startup = function() {
	ctx.drawImage(resources.backgroundImg.image, 0, 0);

	hubaoCanvas = document.createElement('canvas')
	hubaoCtx = hubaoCanvas.getContext("2d");
	canvas.appendChild(hubaoCanvas);
	hubaoCanvas.style.top = 100;
	hubaoCanvas.style.left = 100;
	hubaoCanvas.width = 200;
	hubaoCanvas.height = 200;

	ctx.drawImage(resources.hubao.image,0,0,resources.hubao.image.width/5,resources.hubao.image.height,100,100,resources.hubao.image.width/5,resources.hubao.image.height);
console.log(resources.hubao.image.width/5);
console.log(hubaoCanvas+"...."+hubaoCtx);
	setInterval(drawHubao,200);
}

var currentFrame = 1;
var drawHubao = function() {
	ctx.fillStyle="ffffff";//白色为例子；
	ctx.fillRect(0,0,canvas.width,canvas.height);
	console.log(ctx.width+"..."+ctx.height);
	ctx.drawImage(resources.backgroundImg.image, 0, 0);
	ctx.drawImage(resources.hubao.image,currentFrame*resources.hubao.image.width/5,0,resources.hubao.image.width/5,resources.hubao.image.height,100,100,resources.hubao.image.width/5,resources.hubao.image.height);
	currentFrame++;
	if(currentFrame>4) currentFrame=0;
}



//drawImage(image, x, y)
//drawImage(image, x, y, width, height)
//drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight)